<template>
  <!-- 商品卡片容器，背景白色，圆角，阴影效果，鼠标悬停时阴影加深，过渡动画持续300ms -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="relative"><!-- 商品图片容器，使用相对定位 -->
      <!-- 商品图片，动态绑定src和alt属性 -->
      <img :src="product.image" :alt="product.name" class="w-full h-48 object-contain bg-gray-50 p-2">
    </div>
    <div class="p-4"><!-- 商品信息容器，内边距为4 -->
      <!-- 商品名称，字体加粗，字号为lg，底部边距为2 -->
      <h3 class="font-semibold text-lg mb-2">{{ product.name }}</h3>
      <!-- 商品描述，文字颜色为灰色，字号为sm，底部边距为3 -->
      <p class="text-gray-600 text-sm mb-3">{{ product.description }}</p>
      <!-- 商品价格和操作按钮容器，垂直排列，间距为2 -->
      <div class="flex flex-col gap-2">
        <!-- 商品价格，字号为xl，字体加粗，文字颜色为主题色，保留两位小数 -->
        <div class="text-xl font-bold text-primary">¥{{ product.price.toFixed(2) }}</div>
        <!-- 查看详情和加入购物车按钮容器，水平排列，间距为2 -->
        <div class="flex gap-2">
          <!-- 查看详情按钮，使用router-link组件，动态绑定to属性 -->
          <router-link 
            :to="'/product/' + product.id" 
            class="flex-1 px-3 py-2 text-center border border-primary text-primary rounded hover:bg-primary hover:text-white transition-colors"
          >
            查看详情
          </router-link>
          <!-- 加入购物车按钮，点击触发addToCart方法，根据登录状态禁用按钮 -->
        <button 
            class="flex-1 px-3 py-2 bg-primary text-white rounded hover:bg-primary/90 transition-colors"
          @click="addToCart(product.id)"
          :disabled="!isLoggedIn"
          :title="!isLoggedIn ? '请先注册登录宠物商城' : ''"
        >
            加入购物车
        </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 从vue库中导入ref函数
import { ref } from 'vue'

export default {
// 定义组件的props
  props: {
  // 商品对象，类型为Object，必填
    product: {
      type: Object,
      required: true
    }
  },
  // 组件的setup函数，用于组合式API
  setup(props, { emit }) {
    // 使用ref创建响应式变量isLoggedIn，从localStorage中获取登录状态
    const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true')
    // 定义加入购物车的方法
    const addToCart = (productId) => {
      // 如果未登录，弹出提示框并返回
      if (!isLoggedIn.value) {
        alert('请先登录！')
        return
      }
      // 触发add-to-cart事件，传递商品ID
      emit('add-to-cart', productId)
    }
    // 返回需要在模板中使用的变量和方法
    return {
      addToCart,
      isLoggedIn
    }
  }
}
</script>

<style>
.text-primary {/* 主题色文字 */
  color: #B784B7;
}
.bg-primary {/* 主题色背景 */
  background-color: #B784B7;
}
.border-primary {/* 主题色边框 */
  border-color: #B784B7;
}
.hover\:bg-primary:hover {/* 鼠标悬停时主题色背景 */
  background-color: #B784B7;
}
.hover\:bg-primary\/90:hover {/* 鼠标悬停时主题色背景，透明度为90% */
  background-color: rgba(183, 132, 183, 0.9);
}
button:disabled {/* 禁用按钮样式 */
  opacity: 0.5;
  cursor: not-allowed;
}
</style>